<!-- 模板 -->
<template>
  <div class="register">
    <van-form @submit="onSubmit" ref="fromRef">
      <van-cell-group>
        <van-field v-model="form.phone" name="用户名" label="CN+86" placeholder="请输入手机号码" :rules="rules.phone" />

        <div class="verification">
          <van-field v-model="form.ysm" placeholder="验证码" :rules="rules.yzm" />
          <span @click="down" ref="yzm" class="yzm">发送验证码</span>
        </div>

        <van-field v-model="form.password" type="password" placeholder="输入密码" :rules="rules.password" />
        <van-field v-model="form.word" type="password" placeholder="确认密码" :rules="rules.word" />
      </van-cell-group>
      <div class="box">
        <van-button color="#FC011A" round block type="info">注册</van-button>
      </div>
      <div class="agreement">
        <div>
          注册即代表同意 <span>《用户协议》</span>和
          <span>《隐私政策》</span>
        </div>
      </div>
    </van-form>
    <div class="login">
      <div>
        已有账号
        <span class="login-s" @click="login">立即登录</span>
      </div>
    </div>
  </div>
</template>
<script>
import request from '../utils/request.js'
import { Dialog } from 'vant'
export default {
  name: '',
  data() {
    return {
      const: 60,
      id: null,
      yzm: '',
      fromRef: '',

      form: {
        username: '',
        phone: '',
        yzm: '',
        password: '',
        word: '',
        src: 'http://www.wdnmd.press/yidong/wangyi/my/2my-tx.png',
      },
      rules: {
        username: [
          {
            required: true,
            message: '请填写用户名',
          },
        ],
        phone: [
          {
            required: true,
            message: '请填写手机号',
          },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '您输入的电话不正确',
            // validator: (reg, value, next) => {
            //   reg = /^1[3-9]\d{9}$/
            //   if (!reg.test(value)) {
            //     return next(new Error('非法的电话号码'))
            //   }
            //   next()
            // },
          },
        ],
        yzm: [
          {
            required: true,
            message: '验证码不能为空',
          },
          {
            validator: (val) => {
              let str = sessionStorage.getItem('yzm')
              if (!str) {
                return false
              }

              if (val !== str) {
                return false
              }
            },
            message: '验证码不正确',
          },
        ],
        password: [
          { required: true, message: '请输入密码' },
          {
            // validator: (reg, value, next) => {
            //   reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/
            //   if (!reg.test(value)) {
            //     return next(new Error(' 密码至少包含数字和英文,长度6-20位'))
            //   }
            //   next()
            // },
            trigger: 'blur',
          },
        ],
        word: [
          { required: true, message: '请输入密码' },
          {
            validator: (value) => {
              if (value !== this.form.password) {
                console.log(111)
                return false
              }
            },
            message: '输入密码错误',
          },
        ],
      },
    }
  },
  props: [],
  components: {},
  methods: {
    login() {
      this.$router.push('/')
    },
    verification() {
      let str = '0123456789'
      let num = ''
      for (let i = 0; i < 6; i++) {
        let som = Math.floor(Math.random() * 10)
        num += str[som]
      }
      Dialog.alert({
        title: '验证码',
        message: '验证码为:' + num,
      }).then(() => {
        sessionStorage.setItem('yzm', num)
      })
    },
    down() {
      if (this.id) {
        clearInterval(this.id)
      } else {
        this.verification()
      }
      this.id = setInterval(() => {
        this.$refs.yzm.innerHTML = '还剩' + this.const + '秒'
        this.const--
        if (this.const === 0) {
          clearInterval(this.id)
          this.$refs.yzm.innerHTML = '获取验证码'
          this.const = 60
        }
      }, 1000)
    },
    async register() {
      //你这个是提交  提交之前 先判断 用户符不符合前端的验证 不符合不给提交
      let option = {
        url: 'add',
        type: 'post',
        data: {
          username: this.form.username,
          phone: this.form.phone,
          userPassword: this.form.password,
          src: this.form.src,
        },
      }
      try {
        let { data: res } = await request(option)
        if (res.meta.status !== 200) {
          return this.$message.error(res.meta.msg)
        }
        console.log(res)
        sessionStorage.setItem('register', JSON.stringify(res))
      } catch (error) {
        console.log(error)
      }
    },
    onSubmit() {
      setTimeout(() => {
        this.register()
        this.$router.push('/')
      }, 3000)
    },
    vialidUserName() {
      // 里面的代码只负责生成用户名
      let surname = [
        '赵',
        '钱',
        '孙',
        '李',
        '周',
        '吴',
        '郑',
        '王',
        '冯',
        '陈',
        '楮',
        '卫',
        '蒋',
        '沈',
        '韩',
        '杨',
        '朱',
        '秦',
        '尤',
        '许',
        '何',
        '吕',
        '施',
        '张',
        '孔',
        '曹',
        '严',
        '华',
        '金',
        '魏',
        '陶',
        '姜',
        '戚',
        '谢',
        '邹',
        '喻',
        '柏',
        '水',
        '窦',
        '章',
        '云',
        '苏',
        '潘',
        '葛',
        '奚',
        '范',
        '彭',
        '郎',
        '滕',
        '殷',
        '罗',
        '毕',
        '郝',
        '邬',
        '安',
        '常',
        '乐',
        '于',
        '时',
        '傅',
        '皮',
        '卞',
        '齐',
        '康',
      ]
      let name = [
        '翊铭',
        '嘉琦',
        '柯雄',
        '家先',
        '彬羽',
        '健宇',
        '继锋',
        '启程',
        '开平',
        '森河',
        '若宇',
        '若均',
        '胤然',
        '奕成',
        '家文',
        '久久',
        '建荣',
        '弈然',
        '健辉',
        '国访',
        '国仙',
        '健凯',
        '启言',
        '奕然',
        '家豪',
        '家苑',
        '艺伟',
        '康伯',
        '家虞',
        '建博',
        '万里',
        '大山',
        '大海',
        '宏宇',
        '莽',
        '强辉',
        '汉夫',
        '长江',
        '君雄',
        '平山',
        '希亮',
        '四光',
        '铁生',
        '伍绍祖',
        '继祖',
        '孝先',
        '敬先',
        '广嗣',
        '绍箕',
        '显祖',
        '光宗',
        '念祖',
        '建国',
        '振国',
        '兴国',
        '爱民',
        '学忠',
        '连良',
        '宝善',
        '宗仁',
        '学智',
        '克勤',
        '克俭',
        '惟义',
        '文信',
        '德茂',
        '书诚',
        '勇',
        '尚德',
        '富贵',
        '奉先',
        '光宗',
        '德友',
        '怡孙',
        '德善',
        '德霖',
        '仁',
        '义贾怡',
        '天民',
        '大华',
        '进喜',
        '德荣',
        '德茂',
        '汉祥',
        '运高',
        '生禄',
        '寿康',
        '应吉',
        '顺达',
        '秉贵',
        '厚福',
        '开富',
        '子久',
        '永生',
        '宝瑞',
        '玉和',
        '仁兴',
        '际泰',
        '元发',
        '造时',
        '乃超',
        '长胜',
        '成基',
        '国柱',
        '志远',
        '广才',
        '德榜',
        '文达',
        '家栋',
        '国梁',
        '立功',
        '大江',
        '石山',
        '海',
        '德华',
      ]
      var item = surname[Math.floor(Math.random() * surname.length)]
      var names = name[Math.floor(Math.random() * name.length)]
      let nickName = `${item}${names}`
      this.form.username = nickName
      console.log(this.form.username)
    },
  },
  mounted() {
    this.vialidUserName()
  },
  beforeDestroy() {
    clearInterval(this.id)
  },
}
</script>
<style lang="less" scoped>
.register {
  width: 100%;
  .van-form {
    width: 100%;
    margin-top: 2rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    .van-cell-group {
      width: 80%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .van-cell {
        background-color: #f8f8f8;
        margin-top: 0.4rem;
        padding: 0.2rem 0.32rem;
        font-size: 0.28rem;
        line-height: 0.48rem;
        /deep/.van-field__label {
          margin-right: 0;
          width: 5.8em;
          span {
            font-size: 0.3rem;
            width: 1.8rem;
            position: relative;
            color: #000;
            &::after {
              content: '';
              margin-left: 0.5rem;
              border-right: 0.01rem solid #999999;
            }
            &::before {
              content: '';
              position: absolute;
              display: inline-block;
              top: 0.15rem;
              left: 1.1rem;
              width: 0;
              height: 0;
              border-left: 0.09rem solid transparent;
              border-right: 0.09rem solid transparent;
              border-top: 0.09rem solid #999999;
            }
          }
        }
        /deep/.van-cell__value {
          .van-cell__value {
            .van-cell__value {
            }
          }
        }
      }
      .yzm {
        position: absolute;
        top: 0.63rem;
        right: 0.2rem;
        font-size: 0.28rem;
        color: red;
      }
    }
    .box {
      width: 6rem;
      margin-top: 0.4rem;
      /deep/.van-button {
        width: 100%;
        background-color: #e5e5e5;
        height: 0.88rem;
        font-size: 0.28rem;
        padding: 0 0.3rem;
        border: 0;
      }
    }
    .agreement {
      width: 100%;
      display: flex;
      margin-top: 0.2rem;
      justify-content: center;
      div {
        color: #999999;
        font-size: 0.26rem;
        span {
          color: #000;
        }
      }
    }
  }
  .login {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 3.5rem;
    div {
      font-size: 0.28rem;
      color: #999999;
      .login-s {
        color: red;
      }
    }
  }
}
.verification {
  width: 100%;
  position: relative;
}
</style>
